import React, { Component } from 'react'
//在组件中引入 axios
import axios from 'axios';

export default class Duanzi extends Component {
    //state 属性
    state = {
        duanzi: []
    }
    render() {
        return (
            <div>
                <h2>搞笑段子</h2>
                <hr />
                <ul>
                    {
                        this.state.duanzi.map(item => {
                            return <li style={{marginBottom: '24px'}} key={item.sid}>{item.text}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
    //组件挂载完毕之后, 向服务器发送AJAX请求
    async componentDidMount(){
        //3. 发送 AJAX 请求
        let res = await axios.get('https://api.apiopen.top/getJoke?type=text');
        //打印结果
        // console.log(result);
        let {result} = res.data;
        //修改 duanzi 属性的值
        this.setState({
            duanzi: result
        })

    }
}
